<template>
  <div>
    <el-container style="height: 100vh;min-width: 1091px;">
      <!-- 侧边栏容器 -->
      <el-aside class="aside" :style="{ width: `${isCollapse ? 64 : 208}px`, transition: '0.4s' }">
        <!-- background-color菜单的背景色 -->
        <!-- text-color 菜单的文字颜色 -->
        <!-- collapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） -->
        <!-- background-color="#345" -->
        <el-menu router :default-active="myPath" text-color="#A8B0B6" @open="handleOpen" @close="handleClose"
          @select="selectActive" :style="{ minHeight: '100vh', backgroundColor: '#345' }" :collapse="isCollapse"
          :unique-opened="true" class="el-menu-vertical-demo">
          <el-menu-item class="logoMeunItem">
            <img class="logo" :style="{
              width: `${isCollapse ? 44 : 93}px`,
              height: `${isCollapse ? 18 : 38}px`,
            }" src="../assets/img/logo@2x.png" alt="" />
          </el-menu-item>

          <!-- <template v-for="item in routesArr">
          </template> -->
          <el-menu-item index="/home/index">
            <i class="iconfont icon-shujujianguan iconCommonStyle"></i>
            <span slot="title" class="title">概况</span>
          </el-menu-item>
          <el-menu-item index="/home/analysis">
            <i class="el-icon-s-data" style="margin-right: 0px;font-size: 16px;width: 16px;"></i>
            <span slot="title" class="title">数据概览</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <div :class="$route.path == ''">
                <i class="iconfont icon-cheliangguanli1 iconCommonStyle"></i>
                <span slot="title" class="title">运力管理</span>
              </div>
            </template>
            <el-menu-item index="/home/fleetManagement/list">
              <span slot="title" class="subTitle">车队管理</span>
            </el-menu-item>
            <el-menu-item index="/home/vehicle/list">
              <span slot="title" class="subTitle">车辆管理</span>
            </el-menu-item>
            <el-menu-item index="/home/driver/list">
              <span slot="title" class="subTitle">司机管理</span>
            </el-menu-item>
          </el-submenu>
          <!-- <el-submenu index="4">
            <template slot="title">
              <i class="iconfont icon-hetongguanli1"></i>
              <span slot="title" class="title">合同管理</span>
            </template>
        
          </el-submenu> -->
          <el-submenu index="5">
            <template slot="title">
              <i class="iconfont icon-chengyunyundan iconCommonStyle"></i>
              <span slot="title" class="title">承运订单</span>
            </template>
            <el-menu-item index="/home/carrierOrder/list">
              <span slot="title" class="subTitle">承运订单管理</span>
            </el-menu-item>
            <el-menu-item index="/home/carrierWaybill/list">
              <span slot="title" class="subTitle">承运运单管理</span>
            </el-menu-item>
            <el-menu-item index="/home/carrierSettlement/list">
              <span slot="title" class="subTitle">承运结算单管理</span>
            </el-menu-item>
            <el-menu-item index="/home/contractManagement/List">
              <span slot="title" class="subTitle">承运合同</span>
            </el-menu-item>
            <!-- 3级菜单写法例子 -->
            <!-- <el-submenu index="6-1">
                <template slot="title" >
                  <span class="subTitle">运单管理</span>
                </template>
                <el-menu-item index="/orderManagement/WaybillManagement/InTransitWaybill">
                  <span class="subTitle">z</span>
                </el-menu-item>
            </el-submenu> -->
          </el-submenu>
          <!-- <el-submenu index="6">
            <template slot="title">
              <i class="iconfont icon-chengyundingdan"></i>
              <span slot="title" class="title">承运运单</span>
            </template>
           
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">
              <i class="iconfont icon-chengyunjiesuandan"></i>
              <span slot="title" class="title">承运结算单</span>
            </template>
            
          </el-submenu> -->
          <el-submenu index="8">
            <template slot="title">
              <i class="iconfont icon-ziyingshezhi iconCommonStyle"></i>
              <span slot="title" class="title">自营管理</span>
            </template>
            <el-menu-item index="/home/selfOperatedOrder/selfCreatedOrder">
              <span slot="title" class="subTitle">创建订单</span>
            </el-menu-item>
            <el-menu-item index="/home/selfOperatedOrder/batchCreatedOrder">
              <span slot="title" class="subTitle">批量建单</span>
            </el-menu-item>
            <el-menu-item index="/home/selfOperatedOrder/planManagement">
              <span slot="title" class="subTitle">计划管理</span>
            </el-menu-item>
            <!-- <el-menu-item index="/home/selfOperatedOrder/planCreated">
              <span slot="title" class="subTitle">计划订单</span>
            </el-menu-item> -->
            <el-menu-item index="/home/selfOperatedSettings/settingsManagement">
              <span slot="title" class="subTitle">自营货源方</span>
            </el-menu-item>
            <el-menu-item index="/home/selfOperatedOrder/List">
              <span slot="title" class="subTitle">自营订单管理</span>
            </el-menu-item>
            <el-menu-item index="/home/selfOperatedWaybill/list">
              <span slot="title" class="subTitle">自营运单管理</span>
            </el-menu-item>
            <el-menu-item index="/home/selfOperatedSettlement/list">
              <span slot="title" class="subTitle">自营结算单管理</span>
            </el-menu-item>
          </el-submenu>
          <!-- <el-submenu index="9">
            <template slot="title">
              <i class="iconfont icon-ziyingdingdan"></i>
              <span slot="title" class="title">自营订单</span>
            </template>
           
           
           
          </el-submenu> -->
          <!-- <el-submenu index="10">
            <template slot="title">
              <i class="iconfont icon-ziyingyundan"></i>
              <span slot="title" class="title">自营运单</span>
            </template>
           
          </el-submenu>
          <el-submenu index="11">
            <template slot="title">
              <i class="iconfont icon-ziyingjiesuandan"></i>
              <span slot="title" class="title">自营结算单</span>
            </template>
           
          </el-submenu> -->
          <el-submenu index="12">
            <template slot="title">
              <i class="iconfont icon-jichushezhi1 iconCommonStyle"></i>
              <span slot="title" class="title">基础设置</span>
            </template>
            <!-- <el-menu-item index="/home/BasicSettings/accountingPeriodSetting">
              <span slot="title" class="subTitle">账期设置</span>
            </el-menu-item> -->
            <!-- <el-menu-item index="/home/BasicSettings/roleManagement">
              <span slot="title" class="subTitle">角色管理</span>
            </el-menu-item> -->
            <el-menu-item index="/home/BasicSettings/address">
              <span slot="title" class="subTitle">地址管理</span>
            </el-menu-item>
            <el-menu-item index="/home/BasicSettings/addressExamine">
              <span slot="title" class="subTitle">地址审核</span>
            </el-menu-item>
            <el-menu-item index="/home/BasicSettings/accountManagement">
              <span slot="title" class="subTitle">账号管理</span>
            </el-menu-item>
            <el-menu-item index="/home/accountCreatAndBind">
              <span slot="title" class="subTitle">账号创建与绑定</span>
            </el-menu-item>
            <!-- <el-menu-item index="/home/BasicSettings/insure">
              <span slot="title" class="subTitle">保险咨询管理</span>
            </el-menu-item> -->
            <el-menu-item index="/home/accountAmount">
              <span slot="title" class="subTitle">资金流水</span>
            </el-menu-item>

            <!-- <el-menu-item index="/home/BasicSettings/feedback">
              <span slot="title" class="subTitle">意见反馈</span>
            </el-menu-item> -->
          </el-submenu>


          <el-submenu index="13">
            <template slot="title">
              <i class="iconfont icon-chengyunyundan iconCommonStyle"></i>
              <span slot="title" class="title">统计报表</span>
            </template>
            <el-menu-item index="/dataStatistics/dirver">
              <span slot="title" class="subTitle">司机费用统计</span>
            </el-menu-item>
            <el-menu-item index="/dataStatistics/Coststatistics">
              <span slot="title" class="subTitle">费用统计</span>
            </el-menu-item>
          </el-submenu>
          <!-- isShowCarManager 0代表显示 1不显示 -->
          <el-menu-item index="/" v-if="isShowCarManager == 0" @click="gotoguan()">
            <i class="iconfont icon-cheliangguanli1 iconCommonStyle"></i>
            <span slot="title" class="subTitle">车管平台</span>
          </el-menu-item>
          <el-menu-item index="/" v-if="isShowCarManager == 0" @click="gotoSafety()">
            <i class="iconfont icon-shujujianguan iconCommonStyle"></i>
            <span slot="title" class="subTitle">车辆安全管理</span>
          </el-menu-item>
          <el-menu-item index="/" v-if="isShowCarManager == 0" @click="gotoSa()">
            <i class="iconfont icon-shujujianguan iconCommonStyle"></i>
            <span slot="title" class="subTitle">车辆资产管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 顶栏容器 -->
        <el-header class="header" style="height: 64px">
          <!-- 展开和收起菜单 -->
          <div style="margin-right: 36px">
            <i v-show="!isCollapse" class="iconfont icon-zhankaishouqicaidan" @click="isCollapse = true"
              style="font-size: 19px; cursor: pointer"></i>
            <i v-show="isCollapse" class="iconfont icon-shouqishouqicaidan-copy" @click="isCollapse = false"
              style="font-size: 19px; cursor: pointer"></i>
          </div>

          <!-- 搜索 -->
          <!-- <el-input
            placeholder="请输入内容"
            v-model="search"
            class="input-with-select"
          >
            <template slot="prepend">
              <el-select v-model="select" class="selectBox">
                <el-option label="司机" value="1"></el-option>
                <el-option label="订单号" value="2"></el-option>
                <el-option label="电话" value="3"></el-option>
              </el-select>
            </template>
          </el-input> -->
          <!-- 操作 退出 消息 头像 -->
          <div class="control">
            <div class="control_item after" @click="quitLogin()">
              <i class="iconfont icon-tuichu" style="margin-right: 6px"></i>
              <div>退出</div>
            </div>
            <div class="control_item after" @click="goToMessage">
              <div class="iconBox">
                <div class="iconfont icon-bell"></div>
                <div v-if="$store.state.isNewMessage" class="badge"></div>
              </div>
              <div>消息</div>
            </div>
            <div class="control_item">
              <el-image class="headPic" :src="avatar ? avatar : require('../assets/img/headPic.png')"
                :preview-src-list="[avatar || require('../assets/img/headPic.png')]" style="margin-right: 11px">
              </el-image>
              <div @click="goToPersonalSettings">{{ nickName }}</div>
            </div>
          </div>
        </el-header>
        <!-- 主要区域容器 -->
        <el-main class="mainArea">
          <!-- 二级路由所需要显示的内容 -->
          <!-- 见views/index/index.vue -->
          <keep-alive :max="1">
            <router-view :key="$route.path" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view :key="$route.path" v-if="!$route.meta.keepAlive" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import httpApi from "@/http";
import store from "@/store";
export default {
  data() {
    return {
      myPath: JSON.parse(sessionStorage.getItem("NavStyleState")) || '/home/index',
      isCollapse: false,
      select: "2",
      search: "",
      userName: "",
      nickName: "",
      avatar: "",
      routesArr: [],
      authorityData: {},
      isShowCarManager: "",

      isNewMessage: false,
    };
  },
  methods: {
    goToMessage() {
      if (this.$route.path != '/messageCenter/messageCenterList') {
        this.$router.push('/messageCenter/messageCenterList')
      }
    },
    goToPersonalSettings() {
      if (this.$route.path != '/home/personalSettings') {
        this.$router.push('/home/personalSettings')
      }
    },
    gotoguan() {
      window.open('https://im.cakcauto.com', '_blank')

    },
    gotoSa() {
      window.open('https://mrk.cacxtravel.com', '_blank')
    },
    gotoSafety() {
      // mva-cakc.lunz.cn
      window.open('https://mva-cakc.lunz.cn', '_blank')
    },
    quitLogin() {
      this.$confirm("此操作将退出账号, 是否继续?", "退出", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpApi.loginApi.refreshToken({}).then(res1 => {
            this.$store.commit("deleteToken");
            this.$router.push("/login");
            sessionStorage.removeItem('NavStyleState')
            localStorage.removeItem('token')
            this.$message({
              type: "success",
              message: "已退出账号!",
            });
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    getUserInfo() {
      httpApi.loginApi.getUserInfo().then((res) => {
        this.userName = res.data.data.userName;
        this.avatar = res.data.data.avatar;
        this.nickName = res.data.data.nickName
        this.isShowCarManager = res.data.data.isShowCarManager
        this.$store.commit('getPhoneNumber', { phoneNumber: res.data.data.phoneNumber })

      });
    },
    handleOpen(key, keyPath) {
      //console.log("open", key, keyPath);
    },
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },
    selectActive(val) {
      //console.log("选择", val);
      //console.log(this.$route.path);
    },
    getMessage() {
      let params = {
        port_type: "supplier"
      }
      httpApi.loginApi.getMessageNotice(params).then(res => {
        if (res.data.code == 200) {
          this.noticData = res.data.data
          this.noticData.forEach(item => {
            if (item.read == 0) {//有未读消息
              // this.isNewMessage = true
              this.$store.state.isNewMessage = true
              return
            }

          })
        }
      })
    }


  },
  mounted() {
    this.getUserInfo();
    //console.log('路由',this.$router.options.routes);
    this.routesArr = this.$router.options.routes[2];
    this.getMessage()
  },
  watch: {
    $route: function (to, from) {	//监视$route的变化
      //设置导航菜单高亮的路径

      console.log('路由路径', this.$route.meta.thumb[0].to);
      this.myPath = this.$route.meta.thumb[0].to;

      // 只当页面刷新的时候   更新会话缓存 路径值
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("NavStyleState", JSON.stringify(this.myPath))
      })


    }
  },
};
</script>

<style lang="scss" scoped>
.el-submenu ::v-deep .el-submenu__title:hover {
  color: #ffffff !important;
  background: linear-gradient(270deg,
      hsl(209, 34%, 50%) 0%,
      hsl(210, 25%, 27%) 100%) !important;

  .iconCommonStyle {
    color: #fff;
  }
}

::v-deep .el-menu .el-menu-item:hover {
  outline: 0 !important;

  background: linear-gradient(270deg, #ecf5fe 0%, #1890ff 100%) !important;
  border-radius: 4px;

  .subTitle {
    color: #ffffff !important;
  }

  .title {
    color: #ffffff
  }

  .icon-shujujianguan {
    color: #ffffff
  }
}

// ::v-deep .el-menu .el-menu-item.is-active {
//     color: #2E95FB !important;
//     background: linear-gradient(270deg, #000 0%, #FEFEFE 100%)!important;
// }
// 下拉展开区域背景颜色
.el-submenu ::v-deep .el-menu {
  background-color: #000c17;
}

// / 导航二级菜单栏点击之后的一像素边的问题 /
.el-menu {
  border-right: none;
}

.el-submenu .el-menu {
  background: linear-gradient(270deg, #000 0%, #000 100%) !important;
}

.aside {
  .el-menu-vertical-demo {
    .el-menu-item {
      height: 48px;
      line-height: 48px;
    }

    // 子选项区域背景颜色

    // 菜单选项激活样式

    // logo处不变颜色

    .el-menu-item.is-active {
      background-color: #1890ff !important;
      //width: 192px;
      border-radius: 4px;

      // margin: 0 auto;
      &.logoMeunItem.is-active {
        background-color: #345 !important;
      }

      >span {
        color: #ffffff !important;
      }

      .iconfont {
        color: #ffffff;
      }
    }

    .el-submenu is-opened {
      background-color: #000c17;
    }

    .title {
      font-size: 12px;
      margin-left: 10px;
    }

    .subTitle {
      margin-left: 10px;
      font-size: 12px;
      color: #a1a9af;
    }
  }
}

.header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  min-width: 880px;

  .input-with-select {
    height: 36px;
    width: 280px;

    ::v-deep .el-input__inner {
      height: 36px;
    }

    .selectBox {
      width: 90px;
      height: 36px;
    }
  }

  .control {
    display: flex;
    margin-left: auto;

    .control_item {
      display: flex;
      align-items: center;
      cursor: pointer;

      .iconBox {
        margin-right: 8px;
        position: relative;

        .icon-bell {
          color: #181818;
          font-size: 16px;
        }

        .badge {
          position: absolute;
          height: 8px;
          width: 8px;
          top: -1px;
          right: -1px;
          border-radius: 50%;
          background-color: #F5222D;
        }

      }

      .headPic {
        height: 32px;
        width: 32px;
        border-radius: 50%;
      }

      &.after::after {
        content: "";
        width: 1px;
        height: 20px;
        background: #d9d9d9;
        margin: 0 25px;
      }
    }
  }
}

.aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 208px;
  min-height: 400px;
}

.mainArea {
  background-color: #f5f5f5;
  padding: 16px;
  // overflow-x: scroll;
}

.logoMeunItem {
  height: 116px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  .logo {
    width: 93px;
    height: 38px;
  }
}
</style>
